<template lang="pug">
el-dialog(:title="state?'修改店铺':'新增店铺'" :visible.sync="shopform" :before-close="close" append-to-body)
    el-form(:v-model="f" label-position="right" label-width="80px" :rules="shopRules")
        el-form-item.is-required(label="店铺名称" prop="shopName")
            el-input(v-model="f.shopName")
        el-form-item.is-required(label="店铺区域" prop="city")
            el-cascader(:options="opt" v-model="f.city" @change="handleChange")
        el-form-item.is-required(label="详细地址" prop="shopAddress")
            el-input(v-model="f.shopAddress" placeholder="")
        el-form-item.is-required(label="联系人" prop="contactPerson")
            el-input(v-model="f.contactPerson")
        el-form-item.is-required(label="联系电话" prop="shopMobile")
            el-input(v-model="f.shopMobile")
        el-form-item(label="店铺描述")
            el-input(v-model="f.content")
        el-form-item(label="营业时间")
            el-input(v-model="opBegin_h" style="width: 50px") 
            p(style="display:inline-block") :
            el-input(v-model="opBegin_m" style="width: 50px")
            p(style="display:inline-block") 至
            el-input(v-model="opEnd_h" style="width: 50px")
            p(style="display:inline-block") :
            el-input(v-model="opEnd_m" style="width: 50px") 
            p(style="display:inline-block") (时间格式为24小时制)
    .dialog-footer(slot="footer")
        el-button(@click="changestate") 取消
        el-button(type="primary" @click="save") 确定
</template>
<script>
    export default{
        data(){
            return{
                shopform:false,
                f:{
                    shopName:'',
                    city:[],
                    shopAddress:'',
                    contactPerson:'',
                    shopMobile:'',
                    content:''
                },
                opt:[],
                lng:0,
                lat:0,
                sheng:0,
                shi:0,
                qu:0,
                opBegin_h:'',
                opBegin_m:'',
                opEnd_h:'',
                opEnd_m:'',
                state:false,//false为新增，true为修改
                shopid:-1,
                shopRules:{}
            }
        },
        computed:{
            getstate(){
                return this.$store.state.shopformclass;
            },
            getchange(){
                return this.$store.state.shopform;
            }
        },
        watch:{
            getstate(val){
                this.shopform=val
            },
            //监视弹窗
            getchange(val){//监视入参数据
                if(val!=undefined){
                    // console.log("true",val)
                    this.f.shopName=val.shopName
                    this.f.shopAddress=val.shopAddress
                    this.f.contactPerson=val.contactPerson
                    this.f.city=[Number(val.provinceId),Number(val.cityId),Number(val.countyId)]
                    this.f.content=val.shopDes
                    this.f.shopMobile=val.shopMobile
                    this.sheng=val.provinceId
                    this.shi=val.cityId
                    this.shopid=val.shopId
                    this.qu=val.countyId
                    var a = val.openBeginTime
                    var b = val.openEndTime
                    if(a!=null){
                        var str1 = a.toString();
                        this.opBegin_h = this.transTime(str1,0)
                        this.opBegin_m = this.transTime(str1,1)
                        var bm = this.opBegin_m
                        if(!bm || bm.length==1){
                            if(this.opBegin_m!=null){
                                this.opBegin_m=this.opBegin_m+ 0
                            }else{
                                var c = '00'
                                this.opBegin_m = c.toString()
                            }
                        }
                    }
                    if(b!=null){
                        var str2 = b.toString();
                        this.opEnd_h = this.transTime(str2,0)
                        this.opEnd_m = this.transTime(str2,1)
                        var em = this.opEnd_m
                        if(!em || em.length==1){
                            if(this.opEnd_m!=null){
                                this.opEnd_m=this.opEnd_m+ 0
                            }else{
                                var c = '00'
                                this.opEnd_m = c.toString()
                            }
                        }
                    }
                    this.state=true
                }
            }//监视传参
        },
        methods:{
            close(){//关闭,清空数据
                this.f={}
                this.opBegin_h=""
                this.opBegin_m=""
                this.opEnd_h=""
                this.opEnd_m=""
                this.shopid=-1
                this.$store.state.shopformclass=false
                this.$store.state.shopform={}
            },
            transTime(str,i){
                return str.split('.')[i]
            },
            changestate(){
                this.$store.commit('ChangeShopForm')
            },
            save(){
                var _this=this
                this.getLngLat(function(){
                    // console.log(_this.lng,_this.lat)

                    if(_this.f.shopName==""){
                        _this.$message('店铺名称不能为空')
                        return
                    }
                    if(_this.f.shopAddress==""){
                        _this.$message("店铺地址不能为空")
                        return
                    }
                    if(_this.f.shopMobile==""){
                        _this.$message("联系方式不能为空")
                        return
                    }
                    if(_this.sheng==0&&_this.shi==0){
                        _this.$message("省市区不能为空")
                        return
                    }
                    if(_this.contactPerson==""){
                        _this.$message("联系人不能为空")
                        return
                    }
                    var param = new URLSearchParams();
                    param.append("shopName",_this.f.shopName);
                    param.append("shopAddress",_this.f.shopAddress);
                    param.append("shopDes",_this.f.content);
                    param.append("shopMobile",_this.f.shopMobile);
                    param.append("contactPerson",_this.f.contactPerson);
                    param.append("provinceId",_this.sheng);
                    param.append("cityId",_this.shi);
                    param.append("countyId",_this.qu);
                    param.append("desLongitude",_this.lng);
                    param.append("desLatitude",_this.lat);
                    param.append("openBeginTime",parseFloat(_this.opBegin_h + '.'+ _this.opBegin_m).toFixed(2));
                    param.append("openEndTime",parseFloat(_this.opEnd_h + '.'+ _this.opEnd_m).toFixed(2));
                    if(_this.state==false){
                        axios.post('/shop/saveShop.do',param).then(r=>{
                            // console.log(r)
                            if(r.data.code==200){
                                _this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                _this.$store.state.shoplist=true
                                _this.$store.commit('ChangeShopForm')
                            }else{
                                _this.$message(r.data.message)
                            }
                        })
                    }else if(_this.state==true){
                        param.append("shopId",_this.shopid);
                        axios.post('/shop/updateShop.do',param).then(r=>{
                            if(r.data.code==200){
                                _this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                _this.$store.state.shoplist=true
                                _this.$store.commit('ChangeShopForm')
                            }else{
                                _this.$message(r.data.message)
                            }
                        })
                    }
                    
                })
            },
            handleChange(v){
                // console.log(v)
                this.sheng=v[0]
                this.shi=v[1]
                this.qu=v[2]
            },
            getLngLat(re){//此处调用高德地图
                var _this=this
                this.lng=0
                this.lat=0
                var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                })
                if(this.f.shopAddress==""){
                    _this.$message('请输入门店地址')
                }
                geocoder.getLocation(_this.f.shopAddress.toString(),function(s,r){//高德api的地址坐标转换方法
                    if(s==='complete' && r.info==='OK'){
                        // console.log(r)
                        _this.lng=r.geocodes[0].location.lng
                        _this.lat=r.geocodes[0].location.lat
                        return re()
                    }else{
                        this.$message('地址错误')
                    }
                })
            }
        },
        mounted(){
            var _this=this
            this.opt=[]
            axios.get('/listProvince.do').then(r=>{//获取省市区列表,并转为UI组件可识别的数据
                if(r.data.code!=200){
                    return
                }
                var array = r.data.response.provinces
                function clone(o) {
                    var temp = {}
                    for (var key in o) {
                        if (Object.prototype.toString.call(o[key])=='[object Array]') {
                            temp['children'] = new Array()
                            for (var i of o[key]) {
                                temp['children'] .push(clone(i))
                            }
                        } else {
                            if (key.indexOf('Id') != -1) {
                                if(!temp['value']) temp['value'] = o[key]
                            } else if (key.indexOf('Name') != -1) {
                                temp['label'] = o[key]
                            }
                        }
                    }
                    return temp
                }
                for (let i of array ) {
                    _this.opt.push(clone(i))
                }

            })
        }
    }
</script>
<style>

</style>
